<script setup lang="ts">
import { SunIcon, MoonIcon } from '@/components/Icons'
import { useDarkMode } from '@/hooks'

const { emitDarkMode, darkMode } = useDarkMode()

function toggleDarkMode() {
  emitDarkMode(darkMode.value ? 'off' : 'on')
  // document.body.classList.toggle('dark-mode')
  // darkMode.value = !darkMode.value
}
</script>

<template>
  <button @click="toggleDarkMode">
    <sun-icon v-show="darkMode" class="icon" />
    <moon-icon v-show="!darkMode" class="icon" />
  </button>
</template>

<style lang="scss" scoped>
$size: 40px;
button {
  background-color: white;
  padding: 10px;
  box-sizing: border-box;
  width: $size;
  height: $size;
  border-radius: 50%;
  position: relative;

  .icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
</style>
